<!--  -->
<template>
  <div class = 'show'>
    <Header>
      <i slot="left"></i>
      潮品
    </Header>
    <van-swipe class="swiper" @change="onChange">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
     <div class="title">
        <img src="@/assets/img/home/title.png" alt="" srcset="">
      </div>
     <!-- 四部分 -->
      <div class="content">
        <div class="content-list"  v-for="(item,index) in CenterContentList" :key="index"  @click = 'inde'>
            <img :src="item.ImgUrl" alt="">
         </div>
      </div>
       <!-- 分栏 -->
      <div class="swiper-main">
       <div class="swiper-slide" v-for="(item,index) in SaleList" :key="index">
         <img class="banner_img big-img" :src="item.TabImgUrl" >
           <div v-if="item.CakeList.length!==0" class="ban">
              <div class="swiper-slide swiper-slide-two" style="display:inline-block;width:47%;margin:5px;padding:10px"
                   v-for="(iten,imdex) in item.CakeList" :key="imdex">
                <img class="banner_img" :src="iten.ImgUrl" @click = 'enter'>
                  <p>{{iten.Name}}</p>
                  <p>
                    <span>￥{{iten.Price}}</span>
                    <i>/{{iten.Size}}</i>
                    <img style='width:20px;height:20px;float:right' src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=122773829,134715808&fm=26&gp=0.jpg'  @click = 'addcart'/>
                  </p>
           </div>
        </div>
      </div>
      </div>
    <Footer></Footer>
  </div>
</template>

<script>
import indexjs from './index.js'
export default indexjs
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.container{
  position:relative;
}
.show{
  overflow-y:scroll;
}
.swiper{
  margin:5px 0;
  height:200px;
  .van-swipe-item{
    height:200px;
    img{
      height:200px;
      width:100%;
    }
  }
}
.title img{
  width:100%;
  height:40px;
}
// 踏雪寻梅
.content{
  overflow: hidden;
  padding:0 5 0 -5px;
.content-list{
  display: inline-block;
  fieldset, img {
    width:175px !important;
    height:100px;
  }

}
.content-list:nth-child(n) {
  margin:5px;
  margin-left:10px
}
.content-list:nth-child(2n) {
  margin-left:0px;
  margin-right:0
}
}
// 分栏
.swiper-main{
  .swiper-slide{
    text-align:center;
    .banner_img{
      width:45%;
      height:100px;
    }
    .big-img{
      width:100%;
      height:100%
    }
  }
}

.swiper-slide-two{
  border: 1px solid #eee;
  background-color: white;
  border-radius: 5px
}
.swiper-slide-two img{
  width: 120px;
  height: 110px;
  margin-left: 15px;
}
.swiper-slide-two p{
  height: 20px;
  line-height: 20px;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 600;
  text-align:center;
  color: #666
}
.swiper-slide-two p span{
  color: rgb(211, 100, 137);
}
.swiper-slide-two p i{
  color: #888
}
.footer{
  position:absolute;
  bottom:0px;
}
</style>
